<template>
  <div class="tw-main">
    <div class="screen">
      <ul class="tw-hero tw-hero--multi">
        <li v-for="item in hero" v-bind:key="item.id">
          <span class="tw-hero__label">{{item.label}}</span>
          <span class="tw-hero__value">{{item.value}}</span>
        </li>
      </ul>
      <el-row class="tw-grid">
        <el-col :md="24" :lg="12" class="tw-grid__left">
          <!-- <tw-card
          :label="$t('m.dataExchangeMonitor')"
          > -->
                 <tw-card
          :label="'数据交换监控'"
          >
            <tw-echarts
            id="echarts_dataChangeMonitoring"
            ref="echarts_dataChangeMonitoring"
            :additionalOptions="additionalOptions['echarts_dataChangeMonitoring']"
            height="75vh"
            ></tw-echarts>
            <!--<div class="tw-box">-->
              <!--<tw-echarts-->
                <!--id="echarts_appClassificationPie"-->
                <!--ref="echarts_appClassificationPie"-->
                <!--:additionalOptions="additionalOptions['echarts_appClassificationPie']"-->
                <!--height="75vh"-->
              <!--&gt;</tw-echarts>-->
            <!--</div>-->
            <!--20180713-->
            <!--<div class="tw-box">-->
              <!--<tw-echarts-->
                <!--id="echarts_appClassificationBar"-->
                <!--ref="echarts_appClassificationBar"-->
                <!--:additionalOptions="additionalOptions['echarts_appClassificationBar']"-->
                <!--height="35vh"-->
              <!--&gt;</tw-echarts>-->
            <!--</div>-->
          </tw-card>
        </el-col>
        <el-col :md="24" :lg="12" class="tw-grid__right">
          <!-- <tw-card
          :label="$t('m.dataExchangeSta')"
          > -->
                 <tw-card
          :label="'数据交换集群大盘'"
          >
            <tw-echarts
              id="echarts_dataChangeView"
              ref="echarts_dataChangeView"
              :additionalOptions="additionalOptions['echarts_dataChangeView']"
              height="75vh"
            ></tw-echarts>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
// import configUtil from '@/config/config'
export default{
  created () {
    let vm = this
    // 应用分类数据
    // this.$axios.post(configUtil.getApiPath() + 'app/queryAppCatagoryStatistics', null).then(response => {
    //   if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
    //     for (let i = 0; i < response.data.pageInfo.list.length; i++) {
    //       let item = {
    //         id: i + 1,
    //         label: response.data.pageInfo.list[i].catagoryName,
    //         value: response.data.pageInfo.list[i].totalCount
    //       }
    //       vm.hero.push(item)
    //     }
    //   } else {
    //     console.log('getAppCatalogStatistics data null ....................')
    //   }
    // }, response => {
    //   console.log('getAppCatalogStatistics error')
    // })
    // echarts_dataExchangeBar 数据交换监控
    // this.$axios.post(configUtil.getApiPath() + 'dataexchange/getDataExchangeExampleList', null).then(response => {
    //   if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
    //     let nameArray = []
    //     let finishArray = []
    //     let loadingArray = []
    //     let waitArray = []
    //     let failedArray = []
    //     for (let i = 0; i < response.data.pageInfo.list.length; i++) {
    //       nameArray.push(response.data.pageInfo.list[i].areaName)
    //       finishArray.push(response.data.pageInfo.list[i].finishedCount)
    //       loadingArray.push(response.data.pageInfo.list[i].loadingCount)
    //       waitArray.push(response.data.pageInfo.list[i].waitCount)
    //       failedArray.push(response.data.pageInfo.list[i].failedCount)
    //     }
    //     let exampleCharData = {
    //       'note': '',
    //       'xAxisData': nameArray,
    //       'series': [
    //         {
    //           'name': this.$i18n.messages[this.$i18n.locale].m.finished,
    //           'data': finishArray
    //         },
    //         {
    //           'name': this.$i18n.messages[this.$i18n.locale].m.loading,
    //           'data': loadingArray
    //         },
    //         {
    //           'name': this.$i18n.messages[this.$i18n.locale].m.waiting,
    //           'data': waitArray
    //         },
    //         {
    //           'name': this.$i18n.messages[this.$i18n.locale].m.wrong,
    //           'data': failedArray
    //         }
    //       ]
    //     }
    //     vm.additionalOptions.echarts_dataExchangeBar = exampleCharData
    //   } else {
    //     vm.additionalOptions.echarts_dataExchangeBar = {}
    //   }
    // }, response => {
    //   vm.additionalOptions.echarts_dataExchangeBar = {}
    //   console.log('error')
    // })
    // echarts_dataChangeView 数据交换大盘
    // this.$axios.post(configUtil.getApiPath() + 'dataexchange/getDataExchangeList', null).then(response => {
    //   if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
    //     let nameLabelArray = []
    //     let linkArray = []
    //     let nameArray = []
    //     let baseSymbolSize = 20
    //     let maxSymbolSize = 150
    //     for (let i = 0; i < response.data.pageInfo.list.length; i++) {
    //       if (!vm.arrayContain(nameArray, response.data.pageInfo.list[i].fromAppName)) {
    //         nameArray.push(response.data.pageInfo.list[i].fromAppName)

    //         let name = response.data.pageInfo.list[i].fromAppName
    //         let symbolSize = name.length * baseSymbolSize
    //         if (name.length > 5) {
    //           let subIndex = name.length / 2
    //           name = name.substr(0, subIndex) + '\n' + name.substr(subIndex)
    //           symbolSize = subIndex * baseSymbolSize
    //         }
    //         if (symbolSize > maxSymbolSize) {
    //           symbolSize = maxSymbolSize
    //         }
    //         let nameLabelItem = {
    //           'name': response.data.pageInfo.list[i].fromAppName,
    //           'label': '{a|' + name + '}',
    //           'symbolSize': symbolSize
    //         }
    //         nameLabelArray.push(nameLabelItem)
    //       }
    //       if (!vm.arrayContain(nameArray, response.data.pageInfo.list[i].toAppName)) {
    //         nameArray.push(response.data.pageInfo.list[i].toAppName)

    //         let name = response.data.pageInfo.list[i].toAppName
    //         let symbolSize = name.length * baseSymbolSize
    //         if (name.length > 5) {
    //           let subIndex = name.length / 2
    //           name = name.substr(0, subIndex) + '\n' + name.substr(subIndex)
    //           symbolSize = subIndex * baseSymbolSize
    //         }
    //         if (symbolSize > maxSymbolSize) {
    //           symbolSize = maxSymbolSize
    //         }
    //         let nameLabelItem = {
    //           'name': response.data.pageInfo.list[i].toAppName,
    //           'label': '{a|' + name + '}',
    //           'symbolSize': symbolSize
    //         }
    //         nameLabelArray.push(nameLabelItem)
    //       }
    //       let linkItem = {
    //         'source': response.data.pageInfo.list[i].fromAppName,
    //         'target': response.data.pageInfo.list[i].toAppName,
    //         'value': response.data.pageInfo.list[i].dataCount
    //       }
    //       linkArray.push(linkItem)
    //     }
    //     let data = {
    //       'note': '',
    //       'data': nameLabelArray,
    //       'links': linkArray
    //     }
    //     vm.additionalOptions.echarts_dataChangeView = data
    //   } else {
    //     vm.additionalOptions.echarts_dataChangeView = {}
    //     console.log('getDataExchangeList data null ....................')
    //   }
    // }, response => {
    //   vm.additionalOptions.echarts_dataChangeView = {}
    //   console.log('getDataExchangeList error')
    // })

    // 数据交互监控
    // this.$axios.get(window.location.origin + '/static/weishidataview/jsondata/echarts_dataChangeMonitoring.json').then(response => {
    //   console.log('response====================================', response.data)
    //   if (response.data) {
    //     let nameArray = []
    //     let finishArray = []
    //     let loadingArray = []
    //     let waitArray = []
    //     let failedArray = []
    //     nameArray.push(response.data.xAxisData)
    //     for (let i = 0; i < response.data.seriesData.length; i++) {
    //       finishArray.push(response.data.seriesData[i].finished)
    //       loadingArray.push(response.data.seriesData[i].loading)
    //       waitArray.push(response.data.seriesData[i].inQueue)
    //       failedArray.push(response.data.seriesData[i].hasError)
    //     }
    //     let exampleCharData = {
    //       'note': '',
    //       'xAxisData': nameArray,
    //       'series': [
    //         {
    //           // 'name': this.$i18n.messages[this.$i18n.locale].m.finished,
    //           'data': finishArray
    //         },
    //         {
    //           // 'name': this.$i18n.messages[this.$i18n.locale].m.loading,
    //           'data': loadingArray
    //         },
    //         {
    //           // 'name': this.$i18n.messages[this.$i18n.locale].m.waiting,
    //           'data': waitArray
    //         },
    //         {
    //           // 'name': this.$i18n.messages[this.$i18n.locale].m.wrong,
    //           'data': failedArray
    //         }
    //       ]
    //     }
    //     vm.additionalOptions.echarts_dataChangeMonitoring = exampleCharData
    //   } else {
    //     vm.additionalOptions.echarts_dataChangeMonitoring = {}
    //   }
    // }, response => {
    //   vm.additionalOptions.echarts_dataChangeMonitoring = {}
    //   console.log('error')
    // })

    // 数据交换监控
    vm.$axios.get(window.location.origin + '/static/weishidataview/jsondata/echarts_dataChangeMonitoring.json').then(response => {
      vm.additionalOptions.echarts_dataChangeMonitoring = response.data
      console.log(vm.additionalOptions.echarts_dataChangeMonitoring)
    }, response => {
      console.log('error')
    })

    vm.$axios.get(window.location.origin + '/static/weishidataview/jsondata/echarts_dataChangeView.json').then(response => {
      vm.additionalOptions.echarts_dataChangeView = response.data
      // console.log(vm.additionalOptions.echarts_dataChangeView)
    }, response => {
      console.log('error')
    })
  },

  mounted () {
    window.onresize = () => {
      // this.$refs['echarts_appClassificationPie'].resizeChart()
      // 20180713 this.$refs['echarts_appClassificationBar'].resizeChart()
      this.$refs['echarts_dataChangeMonitoring'].resizeChart()
      this.$refs['echarts_dataChangeView'].resizeChart()
    }
  },
  props: [],
  data () {
    return {
      additionalOptions: {
        echarts_appClassificationPie: {
        },
        echarts_appClassificationBar: {},
        echarts_dataChangeMonitoring: {},
        echarts_dataChangeView: {}
      },
      hero: []
    }
  },
  components: {
    TwCard,
    TwEcharts
  },
  methods: {
    arrayContain (array, obj) {
      for (var i = 0; i < array.length; i++) {
        if (array[i] === obj) {
          return true
        }
      }
      return false
    }
  }
}
</script>

<style scoped></style>
